<!DOCTYPE html>
<html lang="en" data-framework="javascript">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A conversational AI system that listens, learns, and challenges">
    <meta property="og:title" content="ChatGPT">
    <meta property="og:image" content="../dist/img/android-chrome-512x512.png">
    <meta property="og:description" content="A conversational AI system that listens, learns, and challenges">
    <meta property="og:url" content="https://gpt4free.github.io/">
    <link rel="stylesheet" href="../dist/css/style.css">
    <link rel="stylesheet" href="../dist/css/all.min.css">
    <link rel="apple-touch-icon" sizes="180x180" href="../dist/img/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../dist/img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../dist/img/favicon-16x16.png">
    <link rel="manifest" href="../dist/img/site.webmanifest">
    <script src="../dist/js/framework.js"></script>
    <script src="../dist/js/chat.v1.js" defer></script>
    <script src="../dist/js/highlight.min.js" async></script>
    <script src="../dist/js/highlightjs-copy.min.js" async></script>
    <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
    <script src="../dist/js/sanitize-html.js" async></script>
    <link rel="stylesheet" href="../dist/css/dracula.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css">
    <script>
        MathJax = {
            chtml: {
                scale: 1,
                displayAlign: 'left'
            },
            tex: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                displayMath: [['$$', '$$'], ['\\[', '\\]']]
            },
        };
    </script>
    <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
    <script>
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    </script>
    <template>
        <script type="module" src="https://cdn.jsdelivr.net/npm/mistral-tokenizer-js" async>
            import mistralTokenizer from "mistral-tokenizer-js"
        </script>
        <script type="module" src="https://cdn.jsdelivr.net/gh/belladoreai/llama-tokenizer-js@master/llama-tokenizer.js" async>
            import llamaTokenizer from "llama-tokenizer-js"
        </script>
        <script src="https://cdn.jsdelivr.net/npm/gpt-tokenizer/dist/cl100k_base.js" async></script>
        <script src="https://cdn.jsdelivr.net/npm/gpt-tokenizer/dist/o200k_base.js" async></script>
    </template>
    <script type="module" src="../dist/js/photoswipe.js" async></script>
    <script async>
        if (localStorage.getItem("countTokens") != "false") {
            const template = document.head.querySelector('template');
            document.head.appendChild(template.content);
            template.remove();
        }
    </script>
    <script>
        const user_image = '<img src="../dist/img/user.png" alt="your avatar">';
        const gpt_image = '<img src="../dist/img/gpt.png" alt="your avatar">';
        window.conversation_id = "";
    </script>
    <title>G4F Chat</title>
</head>
<body>
    <script async>
        localStorage.getItem("darkMode") == "false" ? document.body.classList.add("white") : null;
    </script>
    <div class="media-overlay"></div>
    <div class="gradient"></div>
    <div class="container">
        <div class="sidebar">
            <div class="sidebar-container">
                <div class="sidebar-header">
                    <div class="sidebar-logo" data-translate="true">G4F Chat</div>
                    <div class="mobile-sidebar-toggle">
                        <i class="fa-solid fa-bars"></i>
                    </div>
                </div>
                <div class="top">
                    <button class="new_convo" onclick="new_conversation()">
                        <i class="fa-regular fa-plus"></i>
                        <span>New Conversation</span>
                    </button>
                    <button class="new_convo" onclick="new_conversation(true)">
                        <i class="fa-solid fa-user-secret"></i>
                        <span>Private Conversation</span>
                    </button>
                </div>
                <div class="bottom_buttons">
                    <button onclick="open_settings();">
                        <i class="fa-solid fa-gear"></i>
                        <span>Open Settings</span>
                    </button>
                    <div class="info">
                        <i class="fa fa-question-circle"></i>
                        <span class="convo-title">support ~ <a href="https://discord.gg/qXA4Wf4Fsm" target="_blank">discord.gg/qXA4Wf4Fsm</a>
                        </span>
                    </div>
                    <div class="info">
                        <i class="fa-brands fa-discord"></i>
                        <span class="convo-title">discord ~ <a href="https://discord.gg/5E39JUWUFa" target="_blank">discord.gg/5E39JUWUFa</a>
                        </span>
                    </div>
                    <div class="info">
                        <i class="fa-brands fa-github"></i>
                        <span class="convo-title">github ~ <a href="https://github.com/xtekky/gpt4free" target="_blank">@xtekky/gpt4free</a>
                        </span>
                    </div>
                    <div class="info">
                        <i class="fa-solid fa-star"></i>
                        <span id="version_text" class="convo-title"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="settings hidden">
            <div class="paper">
                <div class="settings-top-bar">
                    <button class="settings-back-button" onclick="open_settings();">
                        <i class="fa-solid fa-arrow-left"></i>
                    </button>
                     <span>Settings</span>
                </div>
                <div class="field">
                <span class="label">Enable Dark Mode</span>
                <input type="checkbox" id="darkMode" checked />
                <label for="darkMode" class="toogle" title=""></label>
            </div>
            <div class="field">
                <span class="label">Web Access with DuckDuckGo</span>
                <input type="checkbox" id="switch" />
                <label for="switch" class="toogle" title="Add the pages of the first 5 search results to the query."></label>
            </div>
            <div class="field">
                <span class="label">Disable Conversation History</span>
                <input type="checkbox" id="history" />
                <label for="history" class="toogle" title="To improve the reaction time or if you have trouble with large conversations."></label>
            </div>
            <div class="field">
                <span class="label">Hide System-prompt</span>
                <input type="checkbox" id="hide-systemPrompt" />
                <label for="hide-systemPrompt" class="toogle" title="For more space on phones"></label>
            </div>
            <div class="field">
                <span class="label">Download generated media</span>
                <input type="checkbox" id="download_media" checked/>
                <label for="download_media" class="toogle" title="Download and save generated images, audios and videos"></label>
            </div>
            <div class="field">
                <span class="label">Refine files with spaCy</span>
                <input type="checkbox" id="refine"/>
                <label for="refine" class="toogle" title=""></label>
            </div>
            <div class="field">
                <span class="label">Track usage</span>
                <input type="checkbox" id="track_usage"/>
                <label for="track_usage" class="toogle" title=""></label>
            </div>
            <div class="field">
                <span class="label">Report errors</span>
                <input type="checkbox" id="report_error" checked/>
                <label for="report_error" class="toogle" title=""></label>
            </div>
            <div class="field">
                <span class="label">Count words and tokens</span>
                <input type="checkbox" id="countTokens" checked/>
                <label for="countTokens" class="toogle" title=""></label>
            </div>
            <div class="field">
                <span class="label">Automatic Orientation (16:9 or 9:16)</span>
                <input type="checkbox" id="automaticOrientation" checked/>
                <label for="automaticOrientation" class="toogle" title=""></label>
            </div>
            <div class="field box">
                <label for="systemPrompt" class="label">System prompt</label>
                <textarea id="systemPrompt" placeholder="You are a helpful assistant." data-example="If you need to generate images, you can use the following format: ![keywords](/generate/filename.jpg). This will enable the use of an image generation tool."></textarea>
            </div>
            <div class="field box">
                <label for="userInput-height" class="label" title="">Input max. height</label>
                <input type="number" id="userInput-height" value="200"/>
            </div>
            <div class="field box">
                <label for="recognition-language" class="label" title="">Speech recognition language</label>
                <input type="text" id="recognition-language" value="" placeholder="navigator.language"/>
            </div>
            <div class="field mem0 hidden">
                <span class="label">Enable Memory with Mem0</span>
                <input type="checkbox" id="mem0"/>
                <label for="mem0" class="toogle" title=""></label>
                <button onclick="import_memory()">
                    <i class="fa-solid fa-arrow-up-from-bracket"></i>
                    <span>Import Messages to Mem0</span>
                </button>
            </div>
            <div class="field box hidden">
                <label for="mem0-api_key" class="label" title="">Mem0 API:</label>
                <input type="text" id="mem0-api_key" name="mem0[api_key]" placeholder="api_key"/>
            </div>
            <div class="field box hidden">
                <label for="Custom-api_base" class="label" title="">Custom Provider (Base Url):</label>
                <input type="text" id="Custom-api_base" name="Custom[api_base]" placeholder="http://localhost:8080/v1"/>
            </div>
            <div class="field box hidden">
                <label for="Custom-api_key" class="label" title="">Custom Provider:</label>
                <input type="text" id="Custom-api_key" name="Custom[api_key]" placeholder="api_key"/>
            </div>
            <div class="field box hidden">
                <label for="BingCreateImages-api_key" class="label" title="">Microsoft Designer in Bing:</label>
                <input type="text" id="BingCreateImages-api_key" name="BingCreateImages[api_key]" placeholder="&quot;_U&quot; cookie"/>
            </div>
            </div>
            <div class="bottom_buttons">
                <button onclick="delete_conversations()">
                    <i class="fa-solid fa-trash"></i>
                    <span>Clear Conversations</span>
                </button>
                <button onclick="save_storage()">
                    <i class="fa-solid fa-download"></i>
                    <a href="" onclick="return false;">Export Conversations</a>
                </button>
                <button onclick="save_storage(true)">
                    <i class="fa-solid fa-pencil"></i>
                    <a href="" onclick="return false;">Export Settings</a>
                </button>
                <button onclick="this.querySelector('.fa-spin').classList.remove('hidden'); translateAll().then(()=>{window.location.reload()}).catch(()=>{this.querySelector('.fa-spin').classList.add('hidden')})">
                    <i class="fa-solid fa-language"></i>
                    <a href="" onclick="return false;">Translate UI</a>
                    <i class="fas fa-spinner fa-spin hidden"></i>
                </button>
                <button id="showLog">
                    <i class="fa-solid fa-terminal"></i>
                    <a href="" onclick="return false;">Show log</a>
                </button>
            </div>
        </div>
        <div class="provider_forms hidden">
            <div class="bottom_buttons">
                <button id="close_provider_forms">
                    <i class="fa-regular fa-circle-xmark"></i>
                    <a href="" onclick="return false;">Close</a>
                </button>
            </div>
        </div>
        <div class="chat-container">
            <div class="chat-top-panel">
                <div class="mobile-sidebar-toggle">
                    <i class="fa-solid fa-bars"></i>
                </div>
                <div class="convo-title">New Conversation</div>
                <button class="new_convo_icon" onclick="new_conversation()">
                    <i class="fa-regular fa-plus"></i>
                </button>
            </div>
            <textarea id="chatPrompt" class="box" placeholder="System prompt"></textarea>
            <button class="slide-header">
                <i class="fa-solid fa-angles-up"></i>
            </button>
            <div class="chat-body" id="chatBody"></div>
            <div class="chat-footer">
                <div class="chat-toolbar">
                    <div id="input-count" class="">
                        <button class="hide-input">
                            <i class="fa-solid fa-angles-down"></i>
                        </button>
                        <input type="checkbox" id="agree" name="agree" value="yes" checked>
                        <label for="agree" class="text" onclick="this.innerText='';">Scroll to bottom</label>
                    </div>
                    <div class="stop_generating stop_generating-hidden">
                        <button id="cancelButton">
                            <span>Stop Generating</span>
                            <i class="fa-solid fa-stop"></i>
                        </button>
                    </div>
                    <div class="regenerate">
                        <button id="regenerateButton">
                            <span>Regenerate</span>
                            <i class="fa-solid fa-rotate"></i>
                        </button>
                    </div>
                </div>
                <div class="media-player">
                    <i class="fa-regular fa-x"></i>
                </div>
                <div class="media-select hidden">
                    <label class="image-select" for="image" title="">
                        <input type="file" id="image" name="image" accept="image/*" required/>
                        <i class="fa-regular fa-image"></i>
                    </label>
                    <label class="capture-camera" for="camera">
                        <input type="file" id="camera" name="camera" accept="image/*" capture="camera" required/>
                        <i class="fa-solid fa-camera"></i>
                    </label>
                    <label class="capture-audio" for="audio">
                        <i class="fa-solid fa-microphone"></i>
                    </label>
                    <button class="close">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                <div class="user-input">
                    <div class="input-area">
                        <textarea id="userInput" class="box" placeholder="Type a message..." cols="30" rows="10"
                            style="white-space: pre-wrap;resize: none;"></textarea>
                        <label class="file-label image-label">
                            <i class="fa-brands fa-usb"></i>
                        </label>
                        <label class="file-label" for="file">
                            <input type="file" id="file" name="file" accept="*/*" required multiple/>
                            <i class="fa-solid fa-paperclip"></i>
                        </label>
                        <label class="micro-label" for="micro">
                            <i class="fa-solid fa-microphone-slash"></i>
                        </label>
                        <button class="code" title="Insert code block">
                            <i class="fa-solid fa-code"></i>
                        </button>
                        <div class="send-buttons">
                            <button id="addButton" aria-label="Add message">
                                <i class="fa-solid fa-square-plus" aria-hidden="true"></i>
                                <span>Add</span>
                            </button>
                            
                            <button id="sendButton" aria-label="Send message">
                                <i class="fa-regular fa-paper-plane" aria-hidden="true"></i>
                                <span>Send</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="chat-buttons">
                    <div class="field">
                        <button id="search">
                            <i class="fa-solid fa-search"></i>
                        </button>
                    </div>
                   <div class="field">
                      <select name="model" id="model">
                         <option value="" selected="selected">Model: Default</option>
                      </select>
                      <select name="model2" id="model2" class="hidden model"></select>
                      <input type="text" id="model3" value="" class="hidden model" placeholder="Model:"/>
                      <template id="modelPuter">
                        <optgroup label="ChatGPT">
                            <option value="gpt-4o-mini" data-label="gpt-4o-mini">gpt-4o-mini</option>
                            <option value="gpt-4o" data-label="gpt-4o">gpt-4o</option>
                            <option value="gpt-4.1" data-label="gpt-4.1">gpt-4.1</option>
                            <option value="gpt-4.1-mini" data-label="gpt-4.1-mini">gpt-4.1-mini</option>
                            <option value="gpt-4.1-nano" data-label="gpt-4.1-nano">gpt-4.1-nano</option>
                            <option value="gpt-4.5-preview" data-label="gpt-4.5-preview">gpt-4.5-preview</option>
                        </optgroup><optgroup label="O Models">
                            <option value="o1" data-label="o1">o1</option>
                            <option value="o1-mini" data-label="o1-mini">o1-mini</option>
                            <option value="o1-pro" data-label="o1-pro">o1-pro</option>
                            <option value="o3" data-label="o3">o3</option>
                            <option value="o3-mini" data-label="o3-mini">o3-mini</option>
                            <option value="o4-mini" data-label="o4-mini">o4-mini</option>
                        </optgroup><optgroup label="Anthropic Claude">
                            <option value="claude-3-7-sonnet" data-label="claude-3-7-sonnet">claude-3-7-sonnet</option>
                            <option value="claude-3-5-sonnet" data-label="claude-3-5-sonnet">claude-3-5-sonnet</option>
                        </optgroup><optgroup label="Deepseek">
                            <option value="deepseek-chat" data-label="deepseek-chat">deepseek-chat</option>
                            <option value="deepseek-reasoner" data-label="deepseek-reasoner">deepseek-reasoner</option>
                        </optgroup><optgroup label="Google Gemini">
                            <option value="gemini-2.0-flash" data-label="gemini-2.0-flash">gemini-2.0-flash</option>
                            <option value="gemini-1.5-flash" data-label="gemini-1.5-flash">gemini-1.5-flash</option>
                        </optgroup><optgroup label="Meta Llama">
                            <option value="meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo" data-label="meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo">meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo</option>
                            <option value="meta-llama/Meta-Llama--70B-Instruct-Turbo" data-label="meta-llama/Meta-Llama--70B-Instruct-Turbo">meta-llama/Meta-Llama--70B-Instruct-Turbo</option>
                            <option value="meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo" data-label="meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo">meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo</option>
                        </optgroup><optgroup label="Other Models">
                            <option value="mistral-large-latest" data-label="mistral-large-latest">mistral-large-latest</option>
                            <option value="pixtral-large-latest" data-label="pixtral-large-latest">pixtral-large-latest</option>
                            <option value="codestral-latest" data-label="codestral-latest">codestral-latest</option>
                            <option value="google/gemma-2-27b-it" data-label="google/gemma-2-27b-it">google/gemma-2-27b-it</option>
                            <option value="grok-beta" data-label="grok-beta">grok-beta</option>
                        </optgroup>
                    </template>
                   </div>
                   <div class="field">
                      <select name="provider" id="provider">
                         <option value="AnyProvider">Provider: Auto</option>
                         <option value="OpenaiChat">OpenAI ChatGPT</option>
                         <option value="Copilot">Microsoft Copilot</option>
                         <option value="Gemini">Google Gemini</option>
                         <option value="PollinationsAI" selected>Pollinations AI</option>
                         <option value="Live">Pollinations AI (live)</option>
                         <option value="Puter">Puter.js AI (live)</option>
                         <option disabled="disabled">----</option>
                        </select>
                    </div>
                    <div class="field">
                        <button id="pin">
                            <i class="fa-solid fa-thumbtack"></i>
                        </button>
                    </div>
                    <div id="pin_container" class="field"></div>
                </div>
            </div>
        </div>
        <div class="log hidden">
            <div class="log-top-bar">
                <button class="log-back-button" onclick="open_settings();">
                    <i class="fa-solid fa-arrow-left"></i>
                </button>
                <span>Logs</span>
            </div>
        </div>
        <div class="hljs-iframe-container hidden">
            <iframe class="hljs-iframe"></iframe>
        </div>
    </div>
</body>
</html>
